<template>
    <div class="w-full h-full flex flex-col items-center flex-grow">
        <div
            class="text-4xl p-4 text-left w-full my-4 DOUYU-Font cursor-default"
        >
            项目搜索
        </div>
        <div
            class="
                w-4/5
                flex flex-row
                items-center
                overflow-visible
                Serif-Bolder
            "
        >
            <van-search
                v-model="query"
                class="searchBar flex-grow rounded-3xl shadow"
                @search="queryPackage"
                placeholder="请输入需要搜索的信息"
            />

            <div class="Icon Btn" @click="queryPackage">search</div>
        </div>
        <van-overlay
            z-index="10"
            class="flex-col flex items-center justify-center"
            :show="shower.show"
            @click.self="shower.show = false"
        >
            <deliver-shower
                :target="shower.target"
                :type="shower.type"
                @close="shower.show = false"
            ></deliver-shower>
        </van-overlay>

        <van-tabs
            v-model="activeName"
            class="w-4/5 flex flex-col h-full overflow-hidden Serif-Bolder"
        >
            <van-tab title="NPM 搜索" name="npm">
                <npm-search
                    @showPackage="showPackage"
                    class="flex-grow w-full py-4"
                ></npm-search>
            </van-tab>
            <van-tab title="GitHub 搜索" name="gh">
                <gh-search
                    class="w-full py-4"
                    @showPackage="showPackage"
                ></gh-search
            ></van-tab>
        </van-tabs>
    </div>
</template>

<script>
import ghSearch from "./ghSearch.vue";
import { mapState } from "vuex";
import deliverShower from "./deliver-shower.vue";
import npmSearch from "./npmSearch.vue";
export default {
    components: {
        deliverShower,
        npmSearch,
        ghSearch,
    },
    computed: {
        ...mapState({
            npmInfo: (state) => state.deliver.npmBox,
            ghInfo: (state) => state.deliver.ghBox,
        }),
    },
    data() {
        return {
            shower: {
                type: "npm",
                target: {},
                show: false,
            },
            query: "",
            activeName: "npm",
        };
    },
    methods: {
        showPackage(item, type = "npm") {
            console.info(item, type);
            this.shower.type = type;
            this.shower.target = item;
            this.shower.show = true;
        },
        queryPackage() {
            if (this.activeName === "npm") {
                this.npmInfo.changeQuery(this.query);
            } else if (this.activeName === "gh") {
                this.ghInfo.changeQuery(this.query);
            }
        },
    },
};
</script>

<style lang="less" scoped>
.Icon {
    @apply text-3xl mx-2 w-10 h-10 bg-green-400 text-white flex justify-center items-center rounded-full shadow;
}

/deep/ .van-tabs__wrap {
    height: 100% !important;
    max-height: 44px;
}
/deep/ .van-tab__text {
    overflow: visible;
}
/deep/ .van-tabs__content {
    @apply overflow-scroll flex-grow;
}
</style>
